<template>
  <div class="common-title-m f-r-dc" v-if="localStore.innerWidth <= 768">
    <div class="back-box f-r-cc cursor" @click="back">
      <el-icon :size="22" color="#111"><Back /></el-icon>
    </div>
    <span>个人信息</span>
  </div>
  <div class="personal-information-container">
    <div class="f-r-sbc">
      <el-upload
        ref="uploadRef"
        class="avatar-uploader f-r-cc"
        :action="uploadPath"
        :show-file-list="false"
        accept="image/*"
        :data="{ server: 1 }"
        :headers="headers"
        name="image"
        :on-success="handleSuccess"
        :on-change="uploadChange"
        :before-upload="uploadBefore"
      >
        <template #trigger>
          <div class="upload-icon-wrap f-c-cc" v-if="user_av || user_info.avatar">
            <img :src="$imgUrl(user_av || user_info.avatar, 'avImgUrl')" alt="" class="upload-img"/>
          </div>
          <div class="upload-icon-wrap f-c-cc" v-else>
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            <span class="upload-icon-text">上传我的头像</span>
          </div>
        </template>
      </el-upload>
      <div class="f-r-dc cursor" @click="uploadHandle" v-if="localStore.innerWidth <= 768">
        <span class="edit-text">{{ user_av || user_info.avatar ? '更换' : '上传' }}</span>
        <el-icon :size="16" color="#8394AC"><ArrowRight /></el-icon>
      </div>
    </div>
    <ul class="other-information-ul">
      <li class="other-information-li f-r-dc" v-for="(item, index) in other_info" :key="index">
        <div v-if="item.name == 'nickname' && localStore.innerWidth <= 768" class="f-c-cd">
          <span class="li-label">{{ item.label }}</span>
          <p class="li-label-sub">{{ user_info[item.name] ? user_info[item.name] : '--' }}</p>
        </div>
        <span class="li-label" v-else>{{ item.label }}</span>
        <div class="li-ctn f-r-dc">
          <span class="ctn-value" v-if="(item.name == 'nickname' && !edit_name) || item.name != 'nickname'">
            <template v-if="item.name == 'mer_name'">
              <span class="mer_name" v-for="name_ in user_info[item.name]">{{ name_ }}</span>
            </template>
            <span v-else>{{ user_info[item.name] ? localStore.innerWidth <= 768 && item.name == 'nickname' ? '' : user_info[item.name] : '--' }}</span>
          </span>
          <el-input v-if="item.name == 'nickname' && edit_name" v-model="nickname_value" placeholder="" />
          <template v-if="localStore.innerWidth <= 768 && item.name == 'nickname'">
            <div class="f-r-dc cursor" @click="nicknameChange(user_info[item.name])">
              <span class="edit-text">{{ edit_name ? '保存' : '编辑' }}</span>
              <el-icon :size="16" color="#8394AC" v-if="!edit_name"><ArrowRight /></el-icon>
            </div>
          </template>
          <template v-else>
            <span class="ctn-action cursor" v-if="item.name == 'nickname'" @click="nicknameChange(user_info[item.name])">{{ edit_name ? '保存' : '修改昵称' }}</span>
          </template>
        </div>
      </li>
    </ul>
    <div class="btn f-r-cc cursor" @click="submit">保存</div>
  </div>
</template>

<script setup>
import { Plus, Back, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { editWebsiteBaseInfo } from '@/api/index'
import { useUser } from '@/stores/user'
import { useLocal } from '@/stores/local'

const localStore = useLocal()

const emits = defineEmits(['back'])

const user_store = useUser()

const uploading = ref(false)

const edit_name = ref(false)

const nickname_value = ref('')

const user_av = ref('')

const uploadRef = ref('')
function uploadHandle () {
  if (uploadRef.value) {
    uploadRef.value.$el.querySelector('input').click();
  }
}

function back() {
  emits('back')
}

function nicknameChange (val) {
  if (edit_name.value) {
    submit()
    return
  }
  edit_name.value = !edit_name.value
  nickname_value.value = val
}

const other_info = ref([
  {
    name: 'nickname',
    label: '呢称',
    value: '章三'
  },
  {
    name: 'id',
    label: 'ID',
    value: '123456'
  },
  {
    name: 'mobile',
    label: '手机号',
    value: '12345678901'
  },
  {
    name: 'mer_name',
    label: '店铺名称',
    value: '章三的店'
  }
])

const uploadPath = `${import.meta.env.VITE_API_URL}/upload/avatar`

const headers = {
  Authorization:  "Bearer " + localStorage.getItem("token")
}

const user_info = computed(() => {
  return user_store.user_info
})

function handleSuccess(res) {
  user_av.value = res.data.path
  ElMessage.success({ message: '上传成功' })
}
async function uploadBefore(e) {
  if (uploading.value) return
}

function uploadChange(res) {
  uploading.value = true
  if (res.status === 'success') {
    uploading.value = false
  }
  if (res.status === 'fail') {
    ElMessage.error({ message: '上传失败' })
    uploading.value = false
  }
}

// 修改信息
async function submit () {
  let res = await editWebsiteBaseInfo({
    avatar: user_av.value || user_info.value.avatar,
    nickname: nickname_value.value || user_info.value.nickname
  })
  if (res.data && Array.isArray(res.data)) {
    edit_name.value = false
    ElMessage.info({ message: res.msg })
    return
  }
  user_store.user_info = res.data
  localStorage.setItem('user_info',JSON.stringify(res.data))
  edit_name.value = false
  ElMessage.success({ message: '修改成功' })
}

</script>
<style scoped lang="less">
@import './index.less';
@media screen and (max-width: 768px) {
  @import './mobile/index.less';
}
</style>
